import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export interface FriendRequest {
  requestId: string;
  senderId: string;
  receiverId: string;
  content: string;
  status: 'pending' | 'accepted' | 'rejected';
  timestamp: number;
}

interface Props {
  request: FriendRequest;
  currentUserId: string;
  onStatusChange: (requestId: string, newStatus: 'accepted' | 'rejected') => void;
}

export default function FriendRequestItem({ request, currentUserId, onStatusChange }: Props) {
  const isReceiver = request.receiverId === currentUserId;
  const formatTime = (timestamp: number) => {
    const date = new Date(timestamp);
    return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`;
  };

  return (
    <View style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.message}>{request.content}</Text>
        <Text style={styles.time}>{formatTime(request.timestamp)}</Text>
      </View>
      
      {isReceiver && request.status === 'pending' && (
        <View style={styles.actions}>
          <TouchableOpacity 
            style={[styles.button, styles.acceptButton]}
            onPress={() => onStatusChange(request.requestId, 'accepted')}
          >
            <Text style={styles.buttonText}>接受</Text>
          </TouchableOpacity>
          <TouchableOpacity 
            style={[styles.button, styles.rejectButton]}
            onPress={() => onStatusChange(request.requestId, 'rejected')}
          >
            <Text style={styles.buttonText}>拒绝</Text>
          </TouchableOpacity>
        </View>
      )}
      
      {request.status !== 'pending' && (
        <Text style={[
          styles.status,
          request.status === 'accepted' ? styles.accepted : styles.rejected
        ]}>
          {request.status === 'accepted' ? '已接受' : '已拒绝'}
        </Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    padding: 15,
    marginHorizontal: 15,
    marginVertical: 8,
    borderRadius: 8,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  content: {
    marginBottom: 10,
  },
  message: {
    fontSize: 16,
    color: '#333',
    marginBottom: 5,
  },
  time: {
    fontSize: 12,
    color: '#999',
  },
  actions: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 10,
  },
  button: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderRadius: 20,
  },
  acceptButton: {
    backgroundColor: '#4CAF50',
  },
  rejectButton: {
    backgroundColor: '#F44336',
  },
  buttonText: {
    color: 'white',
    fontSize: 14,
  },
  status: {
    textAlign: 'right',
    fontSize: 14,
  },
  accepted: {
    color: '#4CAF50',
  },
  rejected: {
    color: '#F44336',
  },
});